<template>
  <div id="pie-chart">
    <div id="pie-chart-view">

    </div>
  </div>
</template>

<script>
export default {
  name: 'PieChart',
  data() {
    return {
      option: {},
      data: [],
      dataAxis: [],
      title: ''
    }
  },
  methods: {
    initOption() {
      this.option = {
        title: {
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.dataAxis
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    }
  },
  mounted() {
    this.$store.state.data.forEach(element => {
      this.data.push({
        name: '',
        value: element
      });
    });
    this.dataAxis = this.$store.state.dataAxis;
    for(let i = 0; i < this.data.length; i++) {
      this.data[i].name = this.dataAxis[i];
    }
    this.title = this.$store.state.title;
    let myChart = this.$echarts.init(document.getElementById('pie-chart-view'));
    this.initOption();
    myChart.setOption(this.option);
  },
}
</script>

<style>
  #pie-chart-view {
    width: 900;
    height: 700px;
  }
</style>